<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" href="img/favicon.png" type="image/png">
    <title>测试使用</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/themify-icons.css">
    <link rel="stylesheet" href="css/flaticon.css">
    <link rel="stylesheet" href="vendors/fontawesome/css/all.min.css">
    <link rel="stylesheet" href="vendors/animate-css/animate.css">
    <link rel="stylesheet" href="vendors/popup/magnific-popup.css">
    <!-- main css -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <style>
        #blog-container img{
            width: 100%;
            height: 200px;
        }
        #blog-container .col-lg-4{
            margin: 10px 0;
        }
    </style>
</head>
<body>

    <!--================ Start header Top Area =================-->
    <section class="header-top">
        <div class="container">
            <div class="row align-items-center justify-content-between">

                <div class="col-6 col-lg-4 col-md-6 col-sm-6 logo-wrapper">
                    <a href="javascript:void(0)" class="logo" onclick="getYdPortalList('')"><img src="img/2006.png" border="0" style="height: 50px"><span style="font-size: 18px;margin-left: 10px">烟台经济技术开发区建设交通局</span></a>
<!--                    <a href="." class="logo">-->
<!--                        <img src="img/logo.png" alt="">-->
<!--                    </a>-->
                </div>
                <div class="col-lg-4 col-md-6 col-sm-6 search-trigger">
                    <div class="right-button">
                        <ul>
<!--                            <li><a id="search" href="javascript:void(0)"><i class="fas fa-search"></i></a></li>-->
                            <!-- <li><a href="">关于我们</a></li>-->
                            <li><a href="javascript:void(0)" onclick="getBase()"> <i class="far fa-user"></i> </a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="search_input" id="search_input_box">
            <div class="container ">
                <form class="d-flex justify-content-between search-inner">
                    <input type="text" class="form-control" id="search_input" placeholder="Search Here">
                    <button type="submit" class="btn"></button>
                    <span class="ti-close" id="close_search" title="Close Search"></span>
                </form>
            </div>
        </div>
    </section>
    <!--================ End header top Area =================-->

    <!-- Start header Menu Area -->
    <header id="header" class="header_area">
        <div class="main_menu">
            <nav class="navbar navbar-expand-lg navbar-light">
                <div class="container">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
                        <ul class="nav navbar-nav menu_nav ml-auto mr-auto" id="navbarDropdown">
                            <li class="nav-item" onclick="getYdPortalList('')"><a class="nav-link" href="#">首页</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </header>
    <!-- End header MEnu Area -->

    <!--================Fullwidth block Area =================-->

    <!-- <section class="fullwidth-block area-padding-bottom">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6 col-lg-6 col-xl-5">
                    <div class="single-blog">
                        <div class="thumb">
                            <img class="img-fluid" src="img/magazine/1.jpg" alt="">
                        </div>
                        <div class="short_details">
                            <div class="meta-top d-flex">
                                <a href="#"></a>
                            </div>
                            <a class="d-block" href="single-blog.html">
                                <h4>企业网站名称一</h4>
                            </a>
                            <div class="meta-bottom d-flex" >
                                <a href="#">创建时间：March 12 , 2019 . </a>
                                <a class="dark_font" href="#">网站简介</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-6 col-xl-4">
                    <div class="single-blog style_two">
                        <div class="thumb">
                            <img class="img-fluid" src="img/magazine/2.jpg" alt="">
                        </div>
                        <div class="short_details text-center ">

                            <div class="meta-top d-flex justify-content-center">
                                <a href="#">Tours & Travel</a>
                            </div>
                            <a class="d-block" href="single-blog.html">
                                <h4>企业网站名称二</h4>
                            </a>
                            <div class="meta-bottom d-flex justify-content-center">
                                <a href="#">March 12 , 2019 . </a>
                                <a href="#">By Alen Mark</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-12 col-xl-3">
                    <div class="row">
                        <div class="col-12 col-md-6 col-lg-6 col-xl-12">
                            <div class="single-blog style-three m_b_30">
                                <div class="thumb">
                                    <img class="img-fluid" src="img/magazine/3.jpg" alt="">
                                </div>
                                <div class="short_details">

                                    <div class="meta-top d-flex justify-content-center">
                                        <a href="#">Lifestyle</a>
                                    </div>
                                    <a class="d-block" href="single-blog.html">
                                        <h4>企业网站名称三</h4>
                                    </a>
                                </div>
                            </div>

                        </div>
                        <div class="col-12 col-md-6 col-lg-6 col-xl-12">
                            <div class="single-blog style-three">
                                <div class="thumb">
                                    <img class="img-fluid" src="img/magazine/4.jpg" alt="">
                                </div>
                                <div class="short_details">

                                    <div class="meta-top d-flex justify-content-center">
                                        <a href="#">Lifestyle</a>
                                    </div>
                                    <a class="d-block" href="single-blog.html">
                                        <h4>企业网站名称四</h4>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section> -->

    <!--================Fullwidth block Area end =================-->


    <!--================ First block section start =================-->

    <section class="first_block">
        <div class="container">
            <div class="row" id="blog-container">

            </div>
        </div>
    </section>
    <!--================ First block section end =================-->
    <!-- ================ start footer Area ================= -->
    <footer class="footer-area">
        <div class="container">

            <div class="footer-bottom row align-items-center text-center text-lg-left no-gutters">
                <p class="footer-text m-0 col-lg-8 col-md-12">
                    Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | 测试使用</p>
                <div class="col-lg-4 col-md-12 text-center text-lg-right footer-social">
<!--                    <a href="#"><i class="ti-facebook"></i></a>-->
<!--                    <a href="#"><i class="ti-twitter-alt"></i></a>-->
<!--                    <a href="#"><i class="ti-dribbble"></i></a>-->
<!--                    <a href="#"><i class="ti-linkedin"></i></a>-->
                </div>
            </div>
        </div>
    </footer>
    <!-- ================ End footer Area ================= -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/stellar.js"></script>
<script src="vendors/popup/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/mail-script.js"></script>
<script src="js/contact.js"></script>
<script src="js/jquery.form.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/mail-script.js"></script>
<script src="js/theme.js"></script>
<script>
    var apiUrl = "http://localhost:8080";
    var baseUrl = "http://localhost:8080";
    function getBase(){
        window.open(baseUrl, '_blank');
    }

    function getDictDataList() {
        $.ajax({
            url: apiUrl+'/apiPublic/getDictDataList',
            type: 'GET',
            data: {}, // 查询参数
            dataType: 'json',
            success: function(result) {
                console.log(result.data);
                $.each(result.data, function(index, item) {
                    var newLi = $('<li></li>').addClass('nav-item');
                    var newLink = $('<a></a>').addClass('nav-link').attr('href', '#').text(item.dictLabel);
                    newLi.append(newLink);
                    newLi.on('click', function () {
                        getYdPortalList(item.dictValue);
                    });
                    $("#navbarDropdown").append(newLi);
                });
            },
            error: function(xhr, status, error) {
                console.error("An error occurred: " + error);
            }
        })
    }
    function getYdPortalList(key) {
        $.ajax({
            url: apiUrl+'/apiPublic/getYdPortalList',
            type: 'GET',
            data: { portalType: key }, // 查询参数
            dataType: 'json',
            success: function(result) {
                $('#blog-container').empty();
                $.each(result.data, function(index, item) {

                    // 创建最外层的 div
                    var outerDiv = $('<div></div>').addClass('col-lg-4 col-xl-3');
                    // 创建 single-blog 类的 div
                    var singleBlogDiv = $('<div></div>').addClass('single-blog style_five');
                    // 创建 thumb 类的 div
                    var thumbDiv = $('<div></div>').addClass('thumb');
                    // 创建 img 元素
                    if(item.portalImage == null)
                        var img = $('<img>').addClass('img-fluid').attr('src', 'img/magazine/19.jpg').attr('alt', '');
                    else
                        var img = $('<img>').addClass('img-fluid').attr('src', apiUrl+item.portalImage).attr('alt', '');
                    // 将 img 元素添加到 thumbDiv 中
                    thumbDiv.append(img);
                    // 创建 short_details 类的 div
                    var shortDetailsDiv = $('<div></div>').addClass('short_details');
                    // 创建标题链接
                    var titleLink = $('<a></a>').addClass('d-block').attr('href', '#');
                    // 创建标题 h4 元素
                    var titleH4 = $('<h4></h4>').text(item.title);
                    // 将标题 h4 元素添加到标题链接中
                    titleLink.append(titleH4);
                    // 将标题链接添加到 shortDetailsDiv 中
                    shortDetailsDiv.append(titleLink);
                    // 将 thumbDiv 和 shortDetailsDiv 添加到 singleBlogDiv 中
                    singleBlogDiv.append(thumbDiv, shortDetailsDiv);
                    // 将 singleBlogDiv 添加到最外层的 div 中
                    outerDiv.append(singleBlogDiv);
                    // 为最外层的 div 添加点击事件
                    singleBlogDiv.on('click', function() {
                        window.open(item.portalUrl, '_blank');
                    });
                    // 将最外层的 div 添加到博客容器中
                    $('#blog-container').append(outerDiv);
                });
            },
            error: function(xhr, status, error) {
                console.error("An error occurred: " + error);
            }
        });
    }
    $(function () { // 等待页面DOM加载完成后执行代码，类似window.onload
        getDictDataList();
        getYdPortalList('')
    })
  </script>

</body>
</html>
